<style>

</style>
<template>
  <el-dialog
      title="事业群配置"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="60%"
      :before-close="clearForm">
    <el-form
        :label-position="labelPosition"
        label-width="120px"
        :model="saveData"
        :rules="rules"
        ref="ruleForm"
    >
      <el-form-item label="事业群组名字" prop="groupName">
        <el-input :disabled="saveData.id && saveData.id !==''" v-model="saveData.groupName"></el-input>
      </el-form-item>
      <el-form-item label="事业群组ID" prop="groupId">
        <el-input :disabled="saveData.id && saveData.id !==''" v-model="saveData.groupId"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="saveData.desc"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="clearForm">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>

import {remoteValidateGroupId, remoteValidateGroupName, saveGroup} from "../../../api/groupApi";

export default {
  name: "groupForm",
  filters: {},
  components: {},
  data() {
    const validateGroupId = async (rule, value, callback) => {
      if (this.saveData.id) {
        callback()
      }
      let ret = await remoteValidateGroupId(this.saveData.groupId);
      if (ret.data.result) {
        callback()
      } else {
        callback(new Error("事业群ID不能重复"))
      }
    };
    const validateGroupName = async (rule, value, callback) => {
      if (this.saveData.id) {
        callback()
      }
      let ret = await remoteValidateGroupName(this.saveData.groupName);
      if (ret.data.result) {
        callback()
      } else {
        callback(new Error("事业群Name不能重复"))
      }
    };
    return {
      labelPosition: 'right',
      dialogVisible: false,
      saveData: {
        groupId: '',
        groupName: '',
        desc: '',
      },
      rules: {
        groupId: [
          {required: true, message: '此项必填', trigger: 'blur'},
          {validator: validateGroupId, trigger: 'blur'}
        ],
        groupName: [
          {required: true, message: '此项必填', trigger: 'blur'},
          {validator: validateGroupName, trigger: 'blur'}
        ],
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    async load(data) {
      let vm = this
      if (data) {
        vm.saveData = vm.$cloneObj(data)
      }
      vm.dialogVisible = true
    },
    save() {
      let vm = this
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          await vm.doSave(this.saveData)
        }
      })
    },
    async doSave(saveData) {
      let vm = this
      let ret = await saveGroup(saveData);
      if (ret.ok) {
        vm.$message({type: 'success', message: '保存成功!'});
      } else {
        vm.$message({type: 'error', message: '保存失败：' + ret.message});
      }
      vm.clearForm()
      vm.$parent.query()
    },
    clearForm() {
      let vm = this
      try {
        vm.saveData = {
          groupId: '',
          groupName: '',
          desc: '',
        }
        vm.$refs['ruleForm'].resetFields()
      } catch (e) {
        console.log(e)
      }
      vm.dialogVisible = false
    },
  },
  watch: {}
}
</script>
